import React, { useEffect } from 'react'
import { Button, Layout, Avatar, Dropdown, message } from 'antd'
import { MenuFoldOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { collapseMenu, clearData } from '../../store/reducers/tab'
import { useNavigate } from 'react-router-dom'
import { storage } from '../../utils'

const { Header } = Layout

const { clear } = storage

function CommonHeader({ collapsed }) {
  const navigate = useNavigate()

  //创建dispatch
  const dispatch = useDispatch()

  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      )
    },
    {
      key: '2',
      label: (
        <a onClick={() => logout()} target="_blank" rel="noopener noreferrer">
          退出
        </a>
      )
    }
  ]

  // 退出功能
  const logout = () => {
    //清空所有缓存
    clear()
    dispatch(clearData())
    navigate('/login')
  }

  // 点开收起按钮
  const setCollapsed = () => {
    dispatch(collapseMenu())
  }

  return (
    <div>
      <Header
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}
      >
        <Button
          type="text"
          icon={<MenuFoldOutlined />}
          style={{
            fontSize: '0.2rem',
            width: '0.8rem',
            height: '0.4rem',
            backgroundColor: 'white'
          }}
          onClick={() => setCollapsed()}
        />
        <Dropdown menu={{ items }}>
          <Avatar
            size={36}
            src={<img src="	http://localhost:89/uploads/50e7f48ec7974d5258bf0ee70948c162.jpg" />}
          ></Avatar>
        </Dropdown>
      </Header>
    </div>
  )
}

export default CommonHeader
